<script lang="ts">
import type { RouteLocationRaw } from 'vue-router';

interface TLink {
  label: string;
  icon: string;
  to: RouteLocationRaw;
  exact?: boolean;
}
</script>

<script setup lang="ts">
const props = withDefaults(defineProps<{
  links: TLink[];
  /**
   * vertical: 垂直导航
   * horizontal: 水平导航
   * dropdown: 下拉导航
   */
  mode?: 'vertical' | 'horizontal' | 'dropdown';
  showIcon?: boolean;
  verticalClass?: string;
  horizontalClass?: string;
  dropdownClass?: string;
}>(), {
  mode: 'vertical',
  showIcon: true,
});
</script>

<template>
  <div
    v-if="props.mode !== 'dropdown'"
    :class="{
      'page-nav-vertical-mode': props.mode === 'vertical',
      'page-nav-horizontal-mode': props.mode === 'horizontal',
      [props.verticalClass ?? '']: props.mode === 'vertical',
      [props.horizontalClass ?? '']: props.mode === 'horizontal',
    }"
  >
    <RouterLink
      v-for="item of props.links" :key="item.label"
      class="nav-item" :to="item.to"
      :activeClass="!item.exact ? 'active' : undefined"
      :exactActiveClass="item.exact ? 'active' : undefined"
    >
      <i v-if="props.showIcon" class="icon" :class="[item.icon]" />
      <span class="name">{{ item.label }}</span>
    </RouterLink>
  </div>
  <div v-else class="page-nav-dropdown-mode" :class="[props.dropdownClass]">
    <!-- 利用 RouterLink 的 activeClass 实现，默认是 hidden，激活时就会应用 current-route 样式 -->
    <RouterLink
      v-for="item of props.links" :key="item.label"
      class="hidden" :to="item.to"
      :activeClass="!item.exact ? 'current-route' : undefined"
      :exactActiveClass="item.exact ? 'current-route' : undefined"
    >
      <i class="icon" :class="[item.icon]" />
      <span class="name">{{ item.label }}</span>
      <i class="i-ion:chevron-down-outline ml-auto scale-130 text-sys-text-body" />
    </RouterLink>

    <!-- 下拉列表 -->
    <div class="listbox">
      <RouterLink
        v-for="item of props.links" :key="item.label"
        class="nav-item" tabindex="1" :to="item.to"
        :activeClass="!item.exact ? 'active' : undefined"
        :exactActiveClass="item.exact ? 'active' : undefined"
      >
        <i class="icon" :class="[item.icon]" />
        <span class="name">{{ item.label }}</span>
      </RouterLink>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 垂直导航 */
.page-nav-vertical-mode {
  --uno: 'bg-sys-layer-a py-4 px-3 rounded-2 w-45';

  .nav-item {
    --uno: 'py-2 px-3 min-h-7 mt-2 first:mt-0 rounded-2';
  }
}

/* 水平导航 */
.page-nav-horizontal-mode {
  --uno: 'flex bg-sys-layer-a p1 rounded-2 overflow-x-auto';

  .nav-item {
    --uno: 'py-1 px-3 min-h-7 ml-1 flex-1 justify-center first:ml-0 rounded-1';

    // > .name {
    //   --uno: 'break-normal whitespace-nowrap';
    // }
  }
}

/* 下拉导航 */
.page-nav-dropdown-mode {
  --uno: 'text-sm w-40 relative isolate z-3';

  .current-route {
    --uno: 'bg-sys-layer-e flex text-sys-text-head  items-center px-3 h-10 rounded-2';

    > .icon {
      --uno: 'mr-1 text-1.2em';
    }

    > .name {
      --uno: 'truncate';
    }
  }

  .current-route:focus ~ .listbox,
  .current-route:hover ~ .listbox,
  .listbox:hover {
    --uno: 'block';
  }

  .listbox {
    --uno: 'p1 rounded-2 absolute z-2 bg-sys-layer-d hidden w-full transition-all';
    bottom: 0;
    transform: translateY(calc(100% + 4px));

    &::before {
      --uno: 'block w-full h-4  -top-2 left-0 absolute';
      content: '';
    }

    .nav-item {
      --uno: 'p-2 mt-1 first:mt-0';
    }
  }
}

.nav-item {
  --uno: 'box-content flex items-center cursor-pointer rounded-1 text-sys-text-body text-sm';

  &:active {
    --uno: 'bg-sys-layer-e/70 text-sys-text-head';
  }

  @media (hover: hover) {
    &:hover {
      --uno: 'bg-sys-layer-e/70 text-sys-text-head';
    }
  }

  &.active {
    --uno: 'bg-sys-layer-e font-400 text-sys-text-head';
  }

  > .icon {
    --uno: 'mr-1 text-1.2em';
  }

  > .name {
    --uno: 'break-all';
  }
}
</style>
